<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{person.name}} <br>
        {{person.age}} <br>
        {{person.gender}}
    </div>

    <script>

        //所有在视图中用到的数据，都需要提前在data中添加好
        
        //如果是动态添加进去的，没法实现绑定的！

        // 原因： vue初始化数据的过程，把所有data中的数据通过object.defineproperty加到了vm对象中
        //  动态添加的属性，没有通过Object.defineProperty这一步，所以无法实现绑定



        // 如果非要动态添加属性，那么不能用正常的方式（点语法，关联数组语法），得用vue提供的特定的方式

        // 使用Vue.set动态添加的数据是可以实现绑定的
        
        // Vue.set(要添加属性的对象, "属性名称", "属性值")
    
        var vm = new Vue({
            el: "#app",
            data: {
                person: {
                    name: "zcm",
                    age: 18
                }
            }
        })

        
    </script>
</body>
</html>